// pages/search/search.js
import { cjRequest } from '../../utils/service'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 后端返回的搜索数据源
    goods: [],
    // 取消 按钮 是否显示
    isFocus: false,
    // 输入框的值 通过在wxtml中绑定，即可同步输入框的内容
    inpValue: ""
  },
  // 全局的定时器 ，用于 防抖 （防止抖动）
  //  防抖 一般用于 输入框中 防止反复输入导致重复发送请求
  TimeId: -1,
  // 输入框的值改变 就会触发的事件
  handleInput (e) {
    // 1 获取输入框的值
    const { value } = e.detail;
    // 2 检测合法性  trim方法==》去除字符串两端的空格
    // 如果去除空格后，变成空了，那就是不合法的值，直接return终止
    if (!value.trim()) {
      // 输入框为空了，隐藏按钮、清空搜索结果
      this.setData({
        goods: [], //清空搜索结果
        isFocus: false  //隐藏按钮
      })
      // 值不合法
      return;
    }
    // 3 通过验证，输入框的内容合法，则准备发送请求获取数据
    // 输入框中有内容，则显示出【取消按钮】
    this.setData({
      isFocus: true
    })
    //! 先清除上一个定时器（定时器里有调用请求方法，一并被清除了，就不会出发了）
    clearTimeout(this.TimeId);
    //? 然后创立新的定时器，如果后续输入框没有继续输入，就不会清除这个定时器，1s后，触发请求
    this.TimeId = setTimeout(() => {
      // 请求搜索结果的数据
      this.qsearch(value);
    }, 1000);
  },
  // 发送请求获取搜索的数据
  qsearch (query) {
    cjRequest({ url: "/goods/qsearch", data: { query } }).then(res => {
      console.log(res);
      this.setData({
        goods: res.data.message
      })
    })

  },
  // 点击 取消按钮
  handleCancel () {
    this.setData({
      // 清空input输入框的内容
      inpValue: "",
      // 隐藏按钮
      isFocus: false,
      // 清空搜索结果
      goods: []
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})